<template>
  <view class="order_wrap">
    <!--menuTabs菜单-->
    <view class="header" :style="{'height': safeAreaTop + navBarHeight + menuHeight + 'px'}">
      <!--顶部安全区域高度-->
      <view class="safe_area_top" :style="{'height': safeAreaTop + 'px'}"></view>
      <view class="navbar">
        <u-icon name="arrow-left" size="40" color="#000" @click="Daohang" class="nav_bar_icon"></u-icon>
        <view class="nav_bar_title">建议反馈详情</view>
      </view>
      <view class="menu_box">
        <view v-for="(item,index) in menuTabs" :key="index" :class="menuCurrent===item.id ? 'menu_list menu_list_active' : 'menu_list'" @click="clickMenu(item.id)">
          <view v-if="item.active==true" style="color:#FF7900">{{ item.name }}</view>
          <view v-else>{{ item.name }}</view>
          <view v-if="item.id===2" style="display: flex;position: relative;padding-left: 6rpx;">
            <text class="iconfont sanJiaoXing"></text>
            <text class="iconfont icon-arrow-right">试吃官</text>
          </view>
        </view>
      </view>
    </view>
    <!--探店订单内容-->
    <view class="order_box">
      <!--探店tabs-->
      <view v-if="menuCurrent == 1" ref="tdTabsBbox" class="tabs_box">
        <u-tabs
            :list="tdTabslist"
            :is-scroll="true"
            :current="tdCurrent"
            @change="tdChange"
            font-size="26rpx"
            item-width="20%"
            active-color="#FFA844"
            inactive-color="#999999"
            :active-item-style="{ color: '#303133' }"
            bar-height="10" style="width: 100%"></u-tabs>
      </view>
      <!--官返tabs-->
      <view v-if="menuCurrent == 2" class="tabs_box">
        <u-tabs
            :list="gfTabslist"
            :is-scroll="true"
            :current="gfCurrent"
            @change="gfChange"
            font-size="26rpx"
            item-width="25%"
            active-color="#FFA844"
            inactive-color="#999999"
            :active-item-style="{ color: '#303133' }"
            bar-height="10" style="width: 100%"></u-tabs>
      </view>
      <!--主题内容-->
      <view class="order_content">
        <scroll-view
            scroll-y="true"
            :refresher-enabled="true"
            @refresherrefresh="onrefresherrefresh"
            :refresher-triggered="isTriggered"
            refresher-default-style="none"
            lower-threshold="30"
            @scrolltolower="onScrolltolower"
            @scroll="scrollTo"
            :scroll-top="newScrollTop"
            :scroll-with-animation="true"
            style="height:100%;">
          <!-- 加载中提示 -->
          <view class="lanjiazai_wrap" v-if="skeletonLoading">
            <view class="lanjiazai_item">
              <view class="loading_icon">
                <image :src="BestImgUrl + '/index/logo_loading.gif'" class="loading_gif"></image>
              </view>
              <view class="tag">加载中...</view>
            </view>
          </view>
          <!--小程序订单列表-->
          <view class="order_list_wrap" v-if="orderList.length != 0 && menuCurrent == 1">
            <view class="orders-box">
              <view class="order_list_item" v-for="(item,index) in orderList" :key="index" @click="selectOrder(item)">
                <view class="dianji">
                  <image v-if="item.isSelector" class="check_icon"
                         :src="imgurlBwc + '/order/select_fill.png'"></image>
                  <view v-else class="check_icon"
                        style="background-color: #DEDEDE;border-radius: 300rpx;width: 38rpx;height: 38rpx"></view>
                </view>
                <view class="order_info">
                  <view class="order_title u-flex">
                    <view class="shop_title u-flex" @click="copy_no(item.order_no)">
                      <text class="text-Omit">订单号：</text>
                      <text class="text-Omit">{{ item.order_no }}</text>
                      <image :src="imgurlBwc+'/order/copy@2x.png'" style="margin-left: 10rpx"></image>
                    </view>
                    <view class="status">
                      <!--
                        1待付款
                        2已付款
                        3已核验（等待上传）
                        4待审核（已上传）
                        5已完成
                        -1已取消(超时、自动)
                        -2已驳回（审核失败）
                        -3已退款（金额原路返回）
                      -->
                      <text class="color1" v-if="item.status == 1">待付款</text>
                      <text class="color1" v-if="item.status == 2">待使用</text>
                      <text class="color1" v-if="item.status == 3">已核销，待上传笔记</text>
                      <text class="color2" v-if="item.status == 4">审核中</text>
                      <text class="color2" v-if="item.status == 5">已完成</text>
                      <text class="color2" v-if="item.status == 6">待返款</text>
                      <text class="color1" v-if="item.status == 7">任务失效</text>
                      <text class="color1" v-if="item.status == 8">订单已超时,任务失效</text>
                      <text class="color1" v-if="item.status == -1">已取消</text>
                      <text class="color1" v-if="item.status == -2">已驳回</text>
                      <text class="color1" v-if="item.status == -3">已退款</text>
                    </view>
                  </view>
                  <view v-if="item.status == 1 || item.status == 2 || item.status == 3 || item.status == -2" class="count_down" style="padding-top: 20rpx;font-size: 24rpx;color: #888888;">
                    请在
                    <u-count-down
                        v-if="item.status == 1 || item.status == 2 || item.status == 3 || item.status == -2"
                        :timestamp="findcountdown(item)"
                        @end="countDownEndFun"
                        :show-days="true"
                        :show-border="true"
                        font-size="24"
                        color="#FF402F"
                        bgColor="#fff"
                        border-color="#ffffff"
                        separator="zh"
                        separator-size="20"
                        separator-color="#FF4E0D">
                    </u-count-down>
                    <text v-if="item.status == 1">内支付，过期订单将自动取消</text>
                    <text v-if="item.status == 2">内到店核销使用，超时自动取消</text>
                    <text v-if="item.status == 3">内上传笔记,过期将无法提交！</text>
                    <text v-if="item.status == -2">内重新提交笔记，过期将无法提交！</text>
                  </view>
                  <view style="padding: 20rpx 0"><u-line color="#F3F3F3"></u-line></view>
                  <view class="goods_info u-flex">
                    <view class="goods_img">
                      <image :ref="goodsImage[index]" :src="item.package.images[0]" mode="aspectFill" class="goods_img_img"></image>
                    </view>
                    <view class="goods_name">
                      <view>
                        <view style="display: flex;align-items: center;justify-content: space-between;">
                          <view class="ellipsis-one-line" style="flex: 1;">
                            <image style="height: 28rpx;width: 28rpx;" :src="BestImgUrl+'/index/Frame.png'"></image>
                            <text style="font-size: 24rpx;color: #AAAAAA;margin-left: 10rpx;">{{ item.shop.name }}</text>
                          </view>
                        </view>
                        <view class="ellipsis-two-line" style="font-size: 28rpx;color: #333333;margin-top: 10rpx">{{ item.package_name }}</view>
                        <view style="font-size: 24rpx;color: #999999;margin-top: 10rpx">
                          营业时间：{{ item.shop.open_time }}-{{ item.shop.close_time }}
                        </view>
                        <view class="goods_warp u-flex" style="justify-content: space-between;">
                          <view>
                            <view style="margin-top: 10rpx;font-size: 22rpx">
                              <view style="border: 2rpx solid #fd5647;border-radius: 10rpx;" class="u-flex">
                                <view style="background-color: #fd5647;border-radius: 10rpx;padding: 6rpx 10rpx;color: #FFFFFF;">
                                  先付后返
                                </view>
                                <view style="color: #fd5647;margin: 0 6rpx">{{ item.price }}返{{ item.rebate_amount }}</view>
                              </view>
                            </view>
                            <view style="height: 10rpx"></view>
                            <view v-if="item.is_multi_platform == 1" style="border: 2rpx solid #FF7A00;border-radius: 10rpx;padding:6rpx 8rpx;display: flex;justify-content:left;font-size: 24rpx;">
                              <view v-for="(platItem,platIndex) in item.note_platforms" :key="platIndex">
                                <text style="font-size: 24rpx;color: #FF7A00;">{{platItem.title}}</text>
                                <text v-if="platIndex < item.note_platforms.length-1" style="padding: 0 6rpx;">|</text>
                              </view>
                            </view>
                            <view v-if="item.is_multi_platform == 0" style="border: 2rpx solid #FF7A00;border-radius: 10rpx;padding:6rpx 8rpx;flex:0.5;text-align: center;">
                              <text style="font-size: 24rpx;color: #FF7A00;">{{item.platform_type.title}}</text>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="chudijiazai">
                <u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText" margin-top="30"
                            margin-bottom="10"/>
                <view v-if="Bottomingrefresh == true" class="Bottomingrefresh" @click="RefreshBtn()">立即刷新</view>
              </view>
            </view>
          </view>
          <!--官返订单列表-->
          <view class="order_list_wrap" v-if="gfOrderList.length != 0 && menuCurrent == 2">
            <view class="orders-box">
              <view class="order_list_item" v-for="(item,index) in gfOrderList" :key="index" @click="selectOrder(item)">
                <view class="dianji">
                  <image v-if="item.isSelector" class="check_icon"
                         :src="imgurlBwc + '/order/select_fill.png'"></image>
                  <view v-else class="check_icon"
                        style="background-color: #DEDEDE;border-radius: 300rpx;width: 38rpx;height: 38rpx"></view>
                </view>
                <view class="order_info">
                  <view class="order_title u-flex">
                    <view class="shop_title u-flex" @click="copy_no(item.order_no)">
                      <text class="text-Omit">订单号：</text>
                      <text class="text-Omit">{{ item.order_no }}</text>
                      <image :src="imgurlBwc+'/order/copy@2x.png'" style="margin-left: 10rpx"></image>
                    </view>
                    <view class="status">
                      <!--
                        1待付款
                        2已付款
                        3已核验（等待上传）
                        4待审核（已上传）
                        5已完成
                        -1已取消(超时、自动)
                        -2已驳回（审核失败）
                        -3已退款（金额原路返回）
                      -->
                      <text class="color1" v-if="item.code == 3">已报名</text>
                      <text class="color1" v-if="item.code == 4">已下单</text>
                      <text class="color1" v-if="item.code == 6">任务失败</text>
                      <text class="color2" v-if="item.code == 7">已返现</text>
                      <text class="color2" v-if="item.code == 99">审核中</text>
                      <text class="color2" v-if="item.code == 100">已完成</text>
                    </view>
                  </view>
                  <view v-if="item.code == 3" class="count_down" style="padding-top: 20rpx;font-size: 24rpx;color: #888888;">
                    请在
                    <u-count-down
                        v-if="item.code == 3"
                        :timestamp="findcountdown(item)"
                        @end="countDownEndFun(item)"
                        :show-days="true"
                        :show-border="true"
                        font-size="24"
                        color="#FF402F"
                        bgColor="#fff"
                        border-color="#ffffff"
                        separator="zh"
                        separator-size="20"
                        separator-color="#FF4E0D">
                    </u-count-down>
                    <text v-if="item.code == 3">内进店下单，过期报名将自动取消</text>
                  </view>
                  <view style="padding: 20rpx 0"><u-line color="#F3F3F3"></u-line></view>
                  <view class="goods_info u-flex">
                    <view class="goods_img" style="width: 160rpx;height: 160rpx;">
                      <image :ref="goodsImage[index]" :src="item.picture" mode="aspectFill" style="width: 160rpx;height: 160rpx;"></image>
                      <view class="gf_icon">官返</view>
                    </view>
                    <view class="goods_name">
                      <view style="display: flex;">
                        <!--<image style="height: 28rpx;width: 28rpx" :src="BestImgUrl+'/index/Frame.png'"></image>-->
                        <view class="shop_type">美团</view>
                        <text class="shop_name_text ellipsis-two-line">{{ item.shop_name }}</text>
                      </view>
                      <view style="color: #333333;margin-top: 10rpx">实付金额：<text style="color: #fd5647;">￥{{ item.realCharge ? item.realCharge/100 : 0 }}</text></view>
                      <view style="color: #333333;margin-top: 10rpx">返款金额：<text style="color: #fd5647;">￥{{
                          item.back_amount ? item.back_amount/100 : item.code == 1 || item.code == 2 || item.code == 3 || (item.code == 6) && (item.is_back == 0) ? "0" : "待结算"
                        }}</text></view>
                      <view style="font-size: 24rpx;color: #999999;margin-top: 10rpx"> 参与时间：{{ item.create_time }}</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="chudijiazai">
              <u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText" margin-top="30"
                          margin-bottom="10"/>
              <view v-if="Bottomingrefresh == true" class="Bottomingrefresh" @click="RefreshBtn()">立即刷新</view>
            </view>
          </view>
          <!-- 暂无订单提示 -->
          <view v-else-if="orderList.length == 0 && failTimeOutShow == false && menuCurrent == 1" class="noData_box shop_list_wrap_height">
            <u-empty text="暂无订单" mode="order" font-size="32" icon-size="120"></u-empty>
          </view>
          <view v-else-if="gfOrderList.length == 0 && failTimeOutShow == false && menuCurrent == 2" class="noData_box shop_list_wrap_height">
            <u-empty text="暂无订单" mode="order" font-size="32" icon-size="120"></u-empty>
          </view>
          <!-- 网络错误提示 -->
          <view v-else-if="orderList.length == 0 && failTimeOutShow == true && menuCurrent == 1" class="noData_box shop_list_wrap_height">
            <image src="/static/images/Frame33412.png"></image>
            <view class="timeOut">
              <view>网络好像出问题了~</view>
              <view @click="refurbish()">立即刷新</view>
            </view>
          </view>
          <view v-else-if="gfOrderList.length == 0 && failTimeOutShow == true && menuCurrent == 2" class="noData_box shop_list_wrap_height">
            <image src="/static/images/Frame33412.png"></image>
            <view class="timeOut">
              <view>网络好像出问题了~</view>
              <view @click="refurbish()">立即刷新</view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
// import GfOrders from "@/components/orders/gf-orders.vue";
// import TdOrders from "@/components/orders/td-orders.vue";
const app = getApp();
export default {
  /* TdOrders, GfOrders */
  components: {},
  data() {
    return {
      BestImgUrl: app.globalData.imgurl,
      imgurlBwc: app.globalData.imgurlBwc,
      // 顶部安全区域高度
      safeAreaTop: 0,
      // 顶部导航栏高度
      navBarHeight: 0,
      // menuTabs菜单
      menuTabs: [
        {
          name: '探店订单',
          id: '1',
          active: true,
        },
        {
          name: '外卖返现订单',
          id: 2,
          active: false
        },
      ],
      menuCurrent: 1, // menu菜单索引
      menuHeight: 0, // menu菜单高度
      ops:'',// 跳转页面参数
      typs: 'all',//all全部
      pageSize: 10, //每页数量
      currentPage: 1, // 默认页码
      tdsCurrent: 0, // 探店菜单索引
      source: 'order',
      // 探店tabs菜单
      tdTabslist: [
        {
          name: '全部',
          id: 0
        },
        {  // 进行中包括 待使用2、待上传3、待审核4、 已驳回-2
          name: '进行中',
          id: 10
        },
        {
          name: '待付款',
          id: 1
        },
        { // 已结束包括 已退款-3、已取消-1
          name: '已结束',
          id: 11
        },
        {
          name: '已完成',
          id: 5
        }
      ],
      tdCurrent: 0,
      tdTabsHeight: 0,//探店菜单高度
      orderList: [], // 探店订单列表
      types: 'all',//all全部 0进行中 1待付款 2已完成 3已结束
      // 官返tabs菜单
      gfTabslist: [
        {
          name: '全部',
          id: 1
        },
        {
          name: '进行中',
          id: 2
        },
        {
          name: '已完成',
          id: 3
        },
        {
          name: '已取消',
          id: 4
        },
      ],
      gfCurrent: 0,
      gfTabsHeight: 0,//官返菜单高度
      gfOrderList: [], // 官返订单列表
      gfType: 1, //官返订单状态 1全部 2进行中 3已完成 4已取消
      isTriggered: false, //  是否触发下拉刷新
      skeletonLoading: true, //加载中图片
      Bottomingrefresh: false,
      loadingstatus: 'loading',
      loadText: {
        loadmore: '轻轻上拉',
        loading: '加载中...',
        nomore: '没有更多了'
      },
      failTimeOutShow: false,
      zanwuloc: true,
      // 平台数据
      platformData: [
        {
          platformType: 1,
          title: '小红书',
          image: '/note/xhs@2x.png',
          fileList: [],
        },
        {
          platformType: 2,
          title: '抖音',
          image: '/note/dy@2x.png',
          fileList: [],
        },
        {
          platformType: 3,
          title: '大众点评',
          image: '/note/dzdp@2x.png',
          fileList: [],
        },
        {
          platformType: 4,
          title: '美团',
          image: '/note/mt@2x.png',
          fileList: [],
        },
      ],

    }
  },
  onLoad(ops) {
    let that = this
    // 顶部安全区域高度
    that.safeAreaTop = uni.getWindowInfo().safeArea.top
    // 顶部导航栏高度
    uni.createSelectorQuery().select('.navbar').boundingClientRect(rect => {
      that.navBarHeight = rect.height
    }).exec();
    console.log('safeAreaTop', that.navBarHeight)
    //获取顶部菜单menu_box高度
    uni.createSelectorQuery().select('.menu_box').boundingClientRect(rect => {
      that.menuHeight = rect.height
      console.log('导航栏高度==', that.menuHeight)
    }).exec();
    console.log('ops', ops)
    // 页面加载完成执行探店数据获取
    that.Getorders()
  },
  onShow() {
    let that = this
    let token = uni.getStorageSync('token')
    if (!token) {
      that.orderList = []
    }
    that.currentPage = 1
    console.log('当前页码==', that.currentPage)
  },
  methods: {
    // menu菜单
    clickMenu(e){
      let that = this
      that.menuCurrent = e
      console.log('e', that.menuCurrent)
      that.menuTabs[0].active = false
      if (e == 1){
        that.orderList = []
        that.currentPage = 1
        that.Getorders()
      } else if (e == 2){
        that.gfOrderList = []
        that.currentPage = 1
        that.GetGfOrders()
      }
    },
    // 探店tabs切换事件
    tdChange(item) {
      let that = this
      console.log('item', item)
      that.tdCurrent = item.index;
      that.types = that.tdTabslist[item.index].id
      that.orderList = []
      that.currentPage = 1
      that.skeletonLoading = true
      that.failTimeOutShow = false
      that.Getorders()
    },
    // 官返tabs切换事件
    gfChange(item) {
      console.log('item', item)
      this.gfCurrent = item.index;
      this.gfType = this.gfTabslist[item.index].id
      this.gfOrderList = []
      this.currentPage = 1
      this.GetGfOrders()
    },
    // 下拉刷新
    onrefresherrefresh(){
      let that = this
      that.skeletonLoading = true
      that.currentPage = 1
      // 开启 下拉刷新
      that.isTriggered = true
      // 下拉刷新清空数据
      if (that.menuCurrent == 1){
        that.orderList = []
      } else if (that.menuCurrent == 2){
        that.gfOrderList = []
      }

      setTimeout(function () {
        if (that.menuCurrent == 1){
          that.Getorders()
        } else if (that.menuCurrent == 2) {
          that.GetGfOrders()
        }
        uni.stopPullDownRefresh();
        // 关闭 下拉刷新
        that.isTriggered = false
      }, 1500);
    },
    //触底加载
    onScrolltolower() {
      let that = this
      that.loadText.nomore = '没有更多了'
      that.Bottomingrefresh = false
      that.failTimeOutShow = false
      this.loadingstatus = 'loading';
      if (that.zanwuloc == true) {
        setTimeout(function () {
          console.log('已滚动到底部');
          if (that.menuCurrent == 1){
            that.currentPage++
            that.Getorders()
          } else if (that.menuCurrent == 2) {
            that.GetGfOrders()
          }
          uni.hideNavigationBarLoading()
        }, 500);
      } else {
        setTimeout(function () {
          uni.hideNavigationBarLoading()
        }, 500);
      }
    },

    // 获取探店订单列表事件
    Getorders(data) {
      let that = this
      // 组件事件刷新页面，页码重置第一页
      /* if (data){
        that.currentPage = data
      } */

      that.$api.GetTanDianOrder({
        page: that.currentPage,
        limit: that.pageSize,
        status: that.types
      }).then(res => {
        // console.log('订单列表', res.data.result)
        that.loadText.nomore = '没有更多了'
        that.Bottomingrefresh = false
        // 处理平台数据
        res.data.result.forEach((item, index) => {
          if(item.is_multi_platform == 1){
            const noteArr = []
            const note = JSON.parse(item.note_platforms)
            note.forEach((item2, index2) => {
              that.platformData.forEach((item3, index3) => {
                if (item3.platformType == item2) {
                  noteArr.push({
                    platformType: item3.platformType,
                    title: item3.title,
                    image: that.imgurlBwc + item3.image,
                    fileList: [],
                  })
                }
              })
            })
            item.note_platforms = noteArr
          } else {
            that.platformData.forEach((item3, index3) => {
              if (item3.platformType == item.platform_type) {
                item.platform_type = {
                  platformType: item3.platformType,
                  title: item3.title,
                  image: that.imgurlBwc + item3.image,
                  fileList: [],
                }
              }
            })
          }
        })
        if (that.currentPage != 1) {
          if (res.data.result.length != 0) {
            console.log('执行loading')
            that.loadingstatus = 'loading';
            that.orderList = that.orderList.concat(res.data.result)
          } else {
            that.loadingstatus = 'nomore'
            console.log('执行nomore')
          }
        } else {
          that.orderList = res.data.result
          that.loadingstatus = 'nomore'
          console.log('执行nomore2', that.failTimeOutShow)
        }
        console.log('订单列表==', that.orderList)
        that.skeletonLoading = false
      }).catch(err => {
        if (!err.data) {
          //不存在就是访问超时或者接口错误
          //console.log('请求错误或请求超时', err.errMsg)
          that.skeletonLoading = false
          if (that.loadingstatus == 'loading') {
            that.loadingstatus = 'nomore'
            that.loadText.nomore = '网络好像出问题了~'
            that.Bottomingrefresh = true
          } else {
            that.shopsLists = []
            that.loadingstatus = 'loading'
            that.loadText.nomore = '没有更多了'
            that.Bottomingrefresh = false
            that.failTimeOutShow = true
          }
        } else {
          uni.showToast({
            title: err.data.msg,
            icon: 'none',
            duration: 2000
          });
        }
      })
    },
    // 官返订单列表事件
    GetGfOrders(data){
      let that = this
      if ( data){
        that.currentPage = data
      }
      that.$api.GetMtOrderListAPI({
        page: that.currentPage,
        limit: that.pageSize,
        status: that.gfType
      }).then(res => {
        that.loadText.nomore = '没有更多了'
        that.Bottomingrefresh = false
        // console.log('官返订单列表数据=', res.data.result.list)
        if (that.currentPage != 1) {
          if (res.data.result.list.length != 0) {
            that.loadingstatus = 'loading';
            that.gfOrderList = that.gfOrderList.concat(res.data.result.list)
          } else {
            that.loadingstatus = 'nomore'
          }
        } else {
          that.gfOrderList = res.data.result.list
          that.loadingstatus = 'nomore'
        }
        // 关闭 下拉刷新 加载中...
        that.skeletonLoading = false
        console.log('官返订单列表数据=', that.gfOrderList)
      }).catch(err => {

      })
    },
    // 选择订单
    selectOrder(item){
      let that = this
       console.log('选择订单', item)
      // 所有订单设置成未选择状态
      that.orderList.forEach((itemAll) => {
        itemAll.isSelector = false
      })
      // 当前订单设置为选择状态
      item.isSelector = true
      // 传输数据
      // 1. 获取当前页面栈实例（此时最后一个元素为当前页）
      let pages = getCurrentPages();
      // 2. 上一页面实例
      // 注意是length长度，所以要想得到上一页面的实例需要 -2
      // 若要返回上上页面的实例就 -3，以此类推
      let prevPage = pages[pages.length - 2];
      // 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
      prevPage.$vm.getValue(item.order_no)
      uni.navigateBack({
        delta: 1, // 返回的页面数
      })
    },
    //倒计时计算
    findcountdown(item) {
      const now = new Date().getTime();
      // 待付款倒计时
      if (item.status == 1){
        let endTime = new Date(item.end_time).getTime()
        let isend = endTime - now > 0 ? (endTime - now) : 0;
        let seconds = this.$moment(isend).unix();
        // console.log('结束时间', seconds)
        return seconds
      }
      //待到店使用倒计时
      else if (item.status == 2) {
        let invalidTime = new Date(item.invalid_date).getTime()
        let isend = invalidTime - now > 0 ? (invalidTime - now) : 0;
        let seconds = this.$moment(isend).unix();
        // console.log('结束时间', seconds)
        return seconds
      }
      // 待上传笔记倒计时
      else if (item.status == 3) {
        let expiryTime = new Date(item.expiry_date).getTime()
        let isend = expiryTime - now > 0 ? (expiryTime - now) : 0;
        let seconds = this.$moment(isend).unix();
        // console.log('结束时间', seconds)
        return seconds
      }
      // 驳回倒计时
      else if (item.status == -2) {
        let expiryTime = new Date(item.expiry_date).getTime()
        let isend = expiryTime - now > 0 ? (expiryTime - now) : 0;
        let seconds = this.$moment(isend).unix();
        // console.log('结束时间', seconds)
        return seconds
      }
    },
    scrollTo(e){
      // console.log('滚动距离==', e)
      if (e) {
        this.oldTdScrollTop = e.detail.scrollTop
      }
    },
    // 滚动到顶部
    goTop() {
      this.newScrollTop = 0.1
      this.$nextTick(() => {
        this.newScrollTop = 0
      })
    },
    //网络错误等原因-刷新重试商家列表
    refurbish() {
      let that = this
      that.loadingstatus = 'nomore'
      that.Bottomingrefresh = false
      that.failTimeOutShow = false
      that.skeletonLoading = true
      that.pageSize = 1
      that.pageNum = 10
      setTimeout(() => {
        if (that.menuCurrent == 1){
          that.currentPage = 1
          that.Getorders()
        } else if (that.menuCurrent == 2) {
          that.GetGfOrders()
        }
      }, 1000)
    },
    // 返回上一页面
    Daohang(){
      uni.navigateBack({
        delta: 1, // 返回的页面数
      })
    },
  },
}
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #f4f4f4;
}

/deep/ scroll-view ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}
.order_wrap{
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  /* menu菜单css */
  .header  {
    height: 248rpx;
    background: #FDE52F;
    .navbar{
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      position: relative;
      .nav_bar_icon{
        width: 40rpx;
        height: 40rpx;
        padding: 20rpx;
        position: absolute;
        left: 0;
        z-index: 10;
      }
      .nav_bar_title{
        width: 100%;
        font-size: 32rpx;
        color: #000000;
        text-align: center;
      }
    }
    .menu_box {
      height: 80rpx;
      display: flex;
      justify-content: center;
      .menu_list  {
        font-size: 32rpx;
        padding: 14rpx 0;
        margin: 0 30rpx;
        display: flex;
        align-items: center;
        position: relative;
        .sanJiaoXing{
          width: 0;
          height: 0;
          border-left: 8rpx solid transparent;
          border-right: 0rpx solid transparent;
          border-bottom: 26rpx solid #FF7900;
          position: absolute;
          bottom: 0;
        }
        .icon-arrow-right{
          font-size: 24rpx;
          padding: 4rpx 6rpx;
          border-radius: 12rpx 12rpx 12rpx 0;
          color: #FFFFFF;
          background: #FF7900;
          margin-left: 8rpx;
          font-weight: normal;
        }
        .active_line{
          width: 100%;
          height: 8rpx;
          border-radius: 100rpx;
          position: absolute;
          bottom: 0;
          left: 0;
          background: #000000;
        }
      }
      .menu_list_active{
        color: #FF7900;
      }
    }


  }
  .order_box{
    flex: 1;
    height: 0;
    .tabs_box{
      height:88rpx;
    }
    .order_content{
      height: calc(100% - 88rpx);
    }
  }


}

.order_list_wrap {
  padding: 30rpx 0;

  .order_list_item {
    margin-bottom: 30rpx;
    border-radius: 24rpx;
    padding: 20rpx;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    .dianji{
      width: 60rpx;
      height: 60rpx;
    }
    .order_info {
      width: calc(100% - 60rpx);
    }
    .order_title {
      align-items: center;
      justify-content: space-between;

      .shop_title {
        align-items: center;

        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 6rpx;
        }

        text {
          color: $zzy-text-color-999999;
          font-size: 24rpx;
          -webkit-line-clamp: 1;
        }
      }

      .status {
        flex: 1;
        text-align: right;
        font-size: 24rpx;
        .color1 {
          color: #FF4E0D;
        }
        .color2 {
          color: #00AA3B;
        }
        .color3 {
          color: #999999;
        }
      }
    }

    .goods_info {
      align-items: flex-start;
      margin-bottom: 20rpx;
      .goods_img {
        width: 180rpx;
        height: 180rpx;
        margin-top: 20rpx;
        position: relative;
        .gf_icon{
          width: 70rpx;
          text-align: center;
          padding: 0 6rpx;
          font-size: 24rpx;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 10;
          border-radius: 12rpx 0 10rpx 0;
          background-color: #FECC32;
          color: #333333;
        }
        .goods_img_img {
          width: 180rpx;
          height: 180rpx;
          border-radius: 16rpx;
        }
      }

      .goods_name {
        padding-left: 16rpx;
        flex: 1;
        position: relative;
        .shop_type {
          width: 70rpx;
          height: 36rpx;
          background-color: #FECC32;
          color: #333333;
          border-radius: 8rpx;
          font-size: 24rpx;
          text-align: center;
          padding: 2rpx 10rpx;
        }
        .shop_name_text{
          width: calc(100% - 90rpx);
          font-size: 24rpx;
          margin-left: 10rpx
        }

        view:nth-child(1) {
          // font-weight: bold;
          color: $zzy-text-color-333333;
        }

        view:nth-child(2) {
          font-size: 24rpx;
          color: $zzy-text-color-666666;
        }

        view:nth-child(3) {
          align-items: center;
          justify-content: space-between;
          font-size: 24rpx;
          color: $zzy-text-color-666666;
          flex: 1;

          span {
            color: $zzy-text-color-333333;
            font-size: 28rpx;
          }
        }
      }
    }
    // 必看
    .mustSee{
      position: absolute;
      bottom: 30rpx;
      right: -20rpx;
      z-index: 5;
      padding: 5rpx 13rpx;
      color: #FFFFFF;
      font-size: 12rpx;
      border-radius: 16rpx 16rpx 16rpx 0;
      background: linear-gradient(to right, #fc8635 0%, #ec1e2c 100%);
    }
    .bohui_yin {
      border-radius: 16rpx;
      padding: 20rpx;
      background-color: #FCF0ED;
      margin-bottom: 24rpx;
      align-items: flex-start;

      view:nth-child(1) {
        color: #FF4E0D;
      }

      view:nth-child(2) {
        color: $zzy-text-color-666666;
        flex: 1;
      }
    }

    .order_btnzu {
      align-items: center;
      justify-content: space-between;

      .lxkf {
        flex: 1;
        align-items: center;
        color: $zzy-text-color-333333;
        font-size: 24rpx;
      }

      .lxkefu {
        font-size: 24rpx;

        /deep/ button {
          background-color: transparent !important;
          padding: 0 !important;
          margin: 0 !important;
          line-height: 40rpx !important;
          height: 40rpx;
          font-size: 24rpx !important;
          color: #333333 !important;
        }

        /deep/ button::after {
          border: none !important;
        }
      }

      .right_zu {
        .kongxin {
          border-radius: 200rpx;
          width: 144rpx;
          height: 56rpx;
          line-height: 56rpx;
          border: 1px solid #d9d9d9;
          color: $zzy-text-color-333333;
          text-align: center;
          font-size: 24rpx;
        }

        .shise {
          background-color: #FF7900;
          border-radius: 200rpx;
          width: 144rpx;
          height: 56rpx;
          line-height: 56rpx;
          border: 1px solid #FF7900;
          color: #ffffff;
          text-align: center;
          font-size: 24rpx;
          margin-left: 20rpx;
        }
      }
    }
  }
}

.tc_wrap {
  background: linear-gradient(179deg, #FFF2EA 0%, #FFE5E4 5%, #fdf8f8 20%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);;
  padding: 30rpx;
  text-align: center;

  .guanyu_title {
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .wenan {
    color: #999;
    margin-bottom: 20rpx;
  }

  .tc_images {
    width: 520rpx;
    height: 236rpx;
    position: relative;

    image {
      width: 520rpx;
      height: 236rpx;
    }
  }

  .steup_info {
    text-align: left;
    margin-top: 30rpx;

    .yqoiu {
      view:nth-child(1) {
        color: #666;
      }
    }

    .yqoiu2 {
      color: #666;

      span {
        color: #FE7B20;
      }
    }
  }

  .tc_info {
    view:nth-child(1) {
      font-weight: bold;
      font-size: 32rpx;
      margin-bottom: 20rpx;
    }

    view:nth-child(2) {
      font-size: 28rpx;
      color: #999;

      span {
        color: #FF4E0D;
      }
    }

    .gif_tu {
      width: 100%;
      height: 528rpx;
      border-radius: 20rpx;
    }
  }

  .tc_btn_box {
    display: flex;
    align-items: center;
    margin-top: 36rpx;
    justify-content: center;

    .tc_btn_huise {
      flex: 1;
      margin-right: 12rpx;
      background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7);
      border-radius: 200rpx;
      padding: 0 0;
      height: 80rpx !important;
      line-height: 80rpx !important;
      text-align: center;
      color: #333333;
    }

    .tc_btn_huise_err {
      flex: 1;
      background-image: linear-gradient(to right, #FF4E0D, #FF4E0D) !important;
      color: #fff;
      border-radius: 200rpx;
      padding: 0 0;
      height: 80rpx !important;
      line-height: 80rpx !important;
      text-align: center;
    }

    .lijipay1 {
      flex: 1;
      position: relative;
      width: 288rpx;
      margin: 0 20rpx 0 0;

      .u-size-default {
        height: 80rpx !important;
        line-height: 80rpx !important;
        background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7) !important;
        color: #333;
        border: none !important;
      }

      .u-hairline-border:after {
        border: none !important;
      }
    }

    .lijipay {
      flex: 1;
      position: relative;
      width: 288rpx;
      margin: 0 auto;

      .u-size-default {
        height: 80rpx !important;
        line-height: 80rpx !important;
        background-image: linear-gradient(to right, #F18F2C, #FF7A00) !important;
        color: #fff;
        border: none !important;
      }

      .u-hairline-border:after {
        border: none !important;
      }
    }
  }
}
//  支付取消原因css
.cancel-payment {
  padding: 0 34rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  .cancel-payment-top {
    height: 160rpx;
    .cancel-payment-title {
      font-size: 32rpx;
      font-weight: bold;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      color: #3D3D3D;
    }
    .cancel-payment-head {
      font-size: 28rpx;
      color: #888888;
      padding: 20rpx 0;
    }
  }
  .cancel-payment-content {
    height: 0;
    flex: 1;
    .u-radio{
      width: 100% !important;
      display: flex;
      justify-content: space-between;
      padding: 16rpx 0;
      .u-radio__icon-wrap {
        margin-right: 50rpx;
      }
      .u-radio__label {
        font-size: 28rpx;
        color: #3D3D3D;
        order: -1;
      }
    }
  }
  .cancel-payment-bottom {
    padding: 20rpx 0;
    .cancel-payment-btn {
      width: 90%;
      line-height: 80rpx;
      margin: 0 auto;
      color: #fff;
      font-size: 32rpx;
      text-align: center;
      background: linear-gradient( 104deg, #FF7800 0%, #FF7A00 100%);
      border-radius: 200rpx 200rpx 200rpx 200rpx;
    }
  }
}
/* 懒加载css */
.lanjiazai_wrap {
  position: relative;
  z-index: 10000;
  height: calc(100vh);
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #999;
  padding-top: 100rpx;
  .lanjiazai_item {
    text-align: center;
    .loading_icon {
      width: 120rpx;
      height: 120rpx;
    }
    .loading_gif {
      width: 120rpx;
      height: 120rpx;
    }
  }
}
.noData_box {
  margin-top: 30rpx;
  padding-bottom: 260rpx;
  text-align: center;
  color: #999;
  .noData_box .noData_box_img {
    width: 240rpx;
    height: 240rpx;
  }
}

/* 电话、导航css */
.info_address_right {
  width: 200rpx;
  height: 80rpx;
  position: absolute;
  right: 0;
  bottom: 0;
  margin-top: 20rpx;
  align-items: center;
  justify-content: center;
  padding: 0 10rpx;
  .right_1 {
    text-align: center;
    flex: 1;
    padding: 0 10rpx;

    image {
      width: 46rpx;
      height: 46rpx;
      margin-bottom: 6rpx;
    }

    color: $zzy-text-color-666666;
    font-size: 22rpx;
  }
}
</style>